{% extends "public/layout.html" %}

{% block breadcrumb %}
     <ol class="breadcrumb">
        <li>
            <a href="{% url 'index' %}">首页</a>
        </li>
         <li>
             <a>权限管理</a>
         </li>
        <li class="active">
            <strong>权限列表</strong>
        </li>
    </ol>
{% endblock %}


{% block body %}
<div  class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">



<!--添加权限模态窗-->                                                                                 
<div id="addModal" class="modal fade">
 <div class="modal-dialog">
    <div class="modal-content">

      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">添加权限</h4>
      </div><!--modal-header end-->

     <div class="modal-body">
     <p hidden id="errorMsg" class="text-danger" style="color:red"></p> <!-- foe error msg-->
     <form class="form-horizontal" id="addForm">
        <div class='form-group'>
            <label class='col-sm-2 control-label'>权限名</label>
            <div class='col-sm-10'>
                <input id='codename' class="form-control" type='text' name='codename'>
            </div>
        </div>

        <div class='form-group'>
            <label class='col-sm-2 control-label'>权限描述</label>
            <div class='col-sm-10'>
                <input id='name'  class="form-control" type='text' name='name'>
            </div>
        </div>

         <div class='form-group'>
            <label class='col-sm-2 control-label'>关联model</label>
            <div class='col-sm-10'>
                <select name='content_type' id='content_type' class ="form-control" >
                    {% for content_type  in all_content_type %}
                        <option value = "{{ content_type.id}}">{{ content_type.model }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>


        <div class="form-group">
            <div class="modal-footer">
                <button class="btn btn-primary">添加</button>
                <button class="btn btn-warning" data-dismiss="modal">退出</button>
            </div>
      </div>
    </form><!--form end-->

   </div> <!--modal body end-->
   </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


 <!--ibox-content-->
 <div class="ibox-content">
      <!--功能按钮-->
      <div class="">
            <a href="#" id = "addBtn" class="btn btn-sm btn-primary "> 添加权限 </a>
            <form method="get" action="" class="pull-right mail-search">
                 <div class="input-group">
                     <input type="text" class="form-control input-sm" value="{{keyword}}" name="keyword" placeholder="权限名|权限描述">
                    <div class="input-group-btn">
                        <button id='search_btn' type="submit" class="btn btn-sm btn-primary">
                            搜索
                        </button>
                    </div>
                </div>
             </form>
       </div>

 <!--权限列表-->

<table class="table table-striped table-bordered table-hover">
</thead>
    <tr>
        <th class="text-center">权限名</th>
        <th class="text-center">权限描述</th>
        <th class="text-center">关联Model</th>
        <th class="text-center">操作</th>

    </tr>
</thead>
<tbody>
{% for power in page_obj.object_list %}
<tr>
    <td class="text-center">{{ power.codename }}</td>
    <td class="text-center"> {{ power.name }} </td>
    <td class="text-center"> {{ power.content_type }} </td>
    <td class="text-center">
        <a href="{% url 'power_edit' %}?id={{ power.id }}" class="btn btn-xs btn-info update">编辑</a>
        <a href="#" class="btn btn-xs btn-danger delete" data-id = {{ power.id }} >删除</a>
    </td>

</tr>
{% endfor %}
</tbody>
</table>


  
<!--分页页码-->
   <!--分页-->
     <div class="row">
        <div class="col-sm-6">
            <div class="dataTables_info" id="editable_info" role="status" aria-live="polite">
                显示[{{p.count}}]条数据中的第 [{{ page_obj.start_index }}] 至 [{{ page_obj.end_index }}] 的数据
             </div>
        </div>
         {% include 'public/paginator.html' %}
     </div>
</div>  <!--ibox-content end -->


             </div> <!--ibox end-->
        </div>
    </div>
</div>


{% endblock %}

{% block js %}
<script>

/*click show modal*/
$('#addBtn').on('click',function(){
        $('#addModal').modal('show')
})

/* add data for ajax */ 
$('#addForm').on('submit',function(){
       var str = $('#addForm').serialize()
       console.log(str)
       $.post("",str,function(data){
         console.log(data)    //string
         if (data['code']==0){
            $('#addModal').modal('hide')
            swal({
                title:"success",
                text:data['result'],
                type:"success", 
                confirmButtonText:'Good'
                },function(){
                    location.reload()
                 })
         }else{
          $('#errorMsg').html('Failed:'+data['errmsg']).show()
         }
       })
       return false
})  //submit form

/*delete*/
$("tbody").on('click','.delete',function(){
    if(confirm("是否确认删除？")){
        var that = this;
        var id = $(this).attr('data-id')
        $.ajax({
            url:"",
            type: "DELETE",
            data: {"id":id},
            datatype: "json",
            success: function(res){
                console.log(res)
                if (res.code ==0){
                    swal("Good!", res.result, "success")
                    window.location.reload();
                }else{
                    swal("操作失败", res.errmsg, "error")
                }
            }
        })         

    }  // end confirm
     return false   //get data and end
})  


</script>
{% endblock %}

